<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">
      <el-form :inline="true" :model="query" class="demo-form-inline text-left">
        <div class="f-fbc">
          <div>
            <el-form-item :label="$t('key7')" class="">
              <div class="width_420">
                <el-date-picker
                  v-model="time"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="~"
                  start-placeholder="Start date"
                  size="default"
                  end-placeholder="End date"
                />
              </div>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select
                size="default"
                class="width_200"
                v-model="query.status"
                :placeholder="$t('key22')"
                @change="getTableData(true)"
              >
                <el-option value="" label="全部"></el-option>
                <el-option :value="0" label="未处理"></el-option>
                <el-option :value="1" label="处理中"></el-option>
                <el-option :value="2" label="已处理"></el-option>
              </el-select>
            </el-form-item>
            <el-button
              size="default"
              type="primary"
              @click="onSubmit"
              class="marginR12"
              >{{ $t("key3") }}
            </el-button>
          </div>
          <div>
            <!--            <el-button-->
            <!--              size="default"-->
            <!--              type="primary"-->
            <!--              @click="exportTable()"-->
            <!--              class="marginR12"-->
            <!--              >{{ $t("key595") }}本页-->
            <!--            </el-button>-->
            <el-button
              size="default"
              type="primary"
              @click="exportTableAll()"
              class="marginR12"
            >
              <el-icon class="el-icon--left">
                <icon-file-excel theme="outline" size="24" />
              </el-icon>
              {{ $t("key595") }}表格
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showIndex="true"
        :showSelection="false"
        :data="tableData"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="姓名" align="center" width="160" />
        <el-table-column
          prop="mobile"
          label="联系方式"
          align="center"
          width="160"
        />
        <el-table-column prop="name" label="咨询内容" align="center">
          <template #default="scope">
            <p class="ellipsis_3">
              {{ scope.row.content }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="photo" label="图片" align="center" width="220">
          <template #default="scope">
            <div v-if="scope.row.pics.length > 0">
              <el-image
                class="_avatar marginR10"
                :preview-src-list="scope.row.pics"
                :src="scope.row.pics[0]"
                fit="cover"
                preview-teleported
              />
              <span>...共{{ scope.row.pics.length }}张图片</span>
            </div>
            <div v-else>
              <el-tag>用户未上传照片</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="photo"
          label="是否处理"
          align="center"
          width="160"
        >
          <template #default="scope">
            <el-tag type="danger" v-if="scope.row.status == 0">未处理</el-tag>
            <el-tag type="primary" v-if="scope.row.status == 1">处理中</el-tag>
            <el-tag type="success" v-if="scope.row.status == 2">已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          :label="$t('key7')"
          align="center"
          width="160"
        />
        <el-table-column
          :label="$t('message.common.handle')"
          align="center"
          fixed="right"
          width="180"
        >
          <template #default="scope">
            <el-button
              size="default"
              @click="gotoPath(`/consultDetail/${scope.row.id}`)"
              type="primary"
              >{{ $t("message.common.detail") }}
            </el-button>
            <el-button
              size="default"
              type="danger"
              @click="handleDel(scope.$index)"
              >{{ $t("message.common.del") }}
            </el-button>
          </template>
        </el-table-column>
      </Table>
      <!--      <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show" />-->
    </div>
  </div>
</template>
<script setup lang="ts" name="consultList">
import { ref, getCurrentInstance, defineComponent, watch, reactive } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import service from "@/utils/system/request";
import Table from "@/components/table/index.vue";
import { ElMessageBox } from "element-plus";
import { gotoPath, showSuccessToast } from "@/utils/common";
import pubilc from "@/utils/system/pubilc";

const route = useRoute();
// const {title} = route.meta
const { t } = useI18n();
const time = ref(null);
watch(
  () => time.value,
  (newValue, oldValue) => {
    if (newValue) {
      query.start_time = newValue[0];
      query.end_time = newValue[1];
    }
  },
  { deep: true }
);
// 存储搜索用的数据
const query = reactive({
  keyword: "",
  start_time: "",
  end_time: "",
  status: ""
});
// 弹窗控制器
const layer = reactive({
  show: false,
  title: "新增",
  showButton: true
});
// 分页参数, 供table使用
const page = reactive({
  index: 1,
  size: 15,
  total: 0
});
const loading = ref(true);
const switchLoading = ref(false);
const tableData = ref([]);
const chooseData = ref([]);
const handleSelectionChange = val => {
  chooseData.value = val;
};
const onSubmit = () => {
  console.log("submit!");
  getTableData(true);
};

const exportTable = () => {
  const queryString = Object.keys(query)
    .map(key => `${key}=${query[key]}`)
    .join("&");
  console.log(queryString);
  pubilc.orderDownload(
    `admin/consults?page=${page.index}&${queryString}&is_export=1`,
    `咨询管理第${page.index}页数据表`
  );
};
const exportTableAll = () => {
  const queryString = Object.keys(query)
    .map(key => `${key}=${query[key]}`)
    .join("&");
  pubilc.orderDownload(
    `admin/consults?${queryString}&is_export=1`,
    `咨询管理全部数据表`
  );
};
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = init => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  // let queryStr = "";
  // const keys = Object.keys(query);
  // for (let index in keys) {
  //   queryStr += `${keys[index]}=${query[keys[index]]}`;
  //   if (index < keys.length - 1) {
  //     queryStr += "&";
  //   }
  // }
  // console.log(queryStr);

  const queryString = Object.keys(query)
    .map(key => `${key}=${query[key]}`)
    .join("&");

  console.log(queryString);
  service
    .get(`admin/consults?page=${page.index}&${queryString}`)
    .then(({ code, data }) => {
      console.log(code, data);
      loading.value = false;
      if (code === 0) {
        let dataList = data.data;
        tableData.value = dataList;
        page.total = Number(data.total_count);
      } else {
        tableData.value = [];
        page.index = 1;
        page.total = 0;
      }
    });
};
// 删除功能
const handleDel = index => {
  ElMessageBox.confirm(t("message.common.delTip"))
    .then(() => {
      service
        .delete(`admin/consults/${tableData.value[index].id}`)
        .then(({ code, data }) => {
          if (code === 0) {
            showSuccessToast("已删除");
            tableData.value.splice(index, 1);
          }
        });
    })
    .catch(() => {
      // catch error
    });
};
getTableData(true);
</script>

<style lang="scss" scoped>
.demo-form-inline {
  width: 100%;
  background-color: #f7f8fa;
  padding: 12px 22px;

  .el-input {
    --el-input-width: 220px;
  }
}

.layout-container-form .el-form-item {
  margin-right: 28px;
}

//@media screen and (max-width : 1600px) {
//  body{
//    background-color: pink !important;
//  }
//}
</style>
